<template>
  <div class="sign-in-up-dialog">
    <el-dialog :visible.sync="dialogVisible" :show-close="false" :close-on-click-modal="false"
               :close-on-press-escape="false" width="420px">
      <div slot="title" class="block">
        <el-carousel height="230px" indicator-position="none" :interval="6000">
          <el-carousel-item v-for="item in slideShow" :key="item.id">
            <img style="width: 100%" :src="item.url"/>
          </el-carousel-item>
        </el-carousel>
      </div>
      <el-tabs type="card">
        <el-tab-pane class="sign-in-up-dialog-pane" label="登录">
          <el-form :rules="rules" :model="userSign" ref="signInForm">
            <el-form-item prop="account">
              <el-input prefix-icon="iconfont icon-xuesheng1" placeholder="请输入账号" v-model="userSign.account">
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input type="password" prefix-icon="iconfont icon-password" placeholder="请输入密码"
                        v-model="userSign.password">
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button class="sign-in-up-dialog-pane-button" type="primary" @click="signIn('signInForm')">登录
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-checkbox style="float: left" v-model="rememberMe">记住密码</el-checkbox>
              <span style="float: right">忘记密码？</span>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane class="sign-in-up-dialog-pane" label="注册">
          <el-form :rules="rules" :model="userSign" ref="signUpForm">
            <el-form-item prop="account">
              <el-input class="sign-in-up-dialog-pane-input" prefix-icon="iconfont icon-xuesheng1" placeholder="请输入账号"
                        v-model="userSign.account"></el-input>
              <el-select class="sign-in-up-dialog-pane-select" v-model="userSign.role" placeholder="用户类型">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
              </el-select>
            </el-form-item>
            <el-form-item prop="password">
              <el-input type="password" prefix-icon="iconfont icon-password" placeholder="请输入密码"
                        v-model="userSign.password"></el-input>
            </el-form-item>
            <el-form-item prop="confirm" :rules="{validator:confirm,trigger:'blur'}">
              <el-input type="password" prefix-icon="iconfont icon-password" placeholder="请再次输入密码"
                        v-model="userSign.confirm"></el-input>
            </el-form-item>
            <el-form-item prop="captcha">
              <el-input class="sign-in-up-dialog-pane-input" prefix-icon="iconfont icon-zhucedengluyanzhengma"
                        placeholder="请输入验证码" v-model="userSign.captcha"></el-input>
              <img class="sign-in-up-dialog-pane-img-captcha" :src="captchaUrl" @click="changeCaptcha"/>
            </el-form-item>
            <el-form-item>
              <el-button class="sign-in-up-dialog-pane-button" type="primary" @click="sinUp('signUpForm')">注册
              </el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
export default {
  account: 'SignInUp',
  data () {
    return {
      dialogVisible: false,
      rememberMe: false,
      captchaUrl: '/api/user/captcha',
      userSign: {
        account: '',
        password: '',
        confirm: '',
        role: 'student',
        captcha: ''
      },
      rules: {
        account: [
          { required: true, message: '账号不能为空！', trigger: 'blur' },
          { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空！', trigger: 'blur' },
          { min: 6, max: 40, message: '长度在 6 到 40 个字符', trigger: 'blur' }
        ],
        captcha: [
          { required: true, message: '验证码不能为空！', trigger: 'blur' }
        ]
      },
      options: [
        { value: 'admin', label: '管理员' },
        { value: 'teacher', label: '教师' },
        { value: 'student', label: '学生' }
      ],
      slideShow: [
        { url: require('../assets/slidshow/logo.png'), id: 0 },
        { url: require('../assets/slidshow/1.jpg'), id: 1 },
        { url: require('../assets/slidshow/2.jpg'), id: 2 },
        { url: require('../assets/slidshow/3.jpg'), id: 3 },
        { url: require('../assets/slidshow/4.jpg'), id: 4 },
        { url: require('../assets/slidshow/5.jpg'), id: 5 },
        { url: require('../assets/slidshow/6.jpg'), id: 6 },
        { url: require('../assets/slidshow/7.jpg'), id: 7 }
      ]
    }
  },
  methods: {
    // 登录 + 表单校验
    signIn (signInForm) {
      this.$refs[signInForm].validate((valid) => {
        if (valid) {
          this.$axios.put('/api/user/sign-in', this.userSign)
            .then(response => {
              let result = response.data
              if (result.success) {
                let user = result.data
                this.$message.success('登录成功！上次登录：' + user.lastSignInTime)
                // 更新 vuex 中 user 信息
                this.$store.commit('updateUser', user)
                // 跳转到首页
                this.$router.push({ path: '/' })
              } else {
                this.$message.error(result.msg)
              }
            })
        }
      })
    },
    // 注册 + 表单校验
    sinUp (signUpForm) {
      this.$refs[signUpForm].validate((valid) => {
        if (valid) {
          this.$axios.post('/api/user/sign-up', this.userSign)
            .then(response => {
              let result = response.data
              console.log(result)
              if (result.success) {
                this.$message.success('注册成功！')
              } else {
                this.$message.error(result.msg)
              }
            })
        } else {
          console.log('error submit!!')
          return false
        }
        this.changeCaptcha()
      })
    },
    // 确认密码
    confirm (rule, value, callback) {
      if (value !== this.userSign.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    },
    // 重新获取验证码
    changeCaptcha () {
      this.captchaUrl = '/api/user/captcha?d=' + Math.random()
    },
    // 延时显示登录界面
    changeDialogVisible () {
      setTimeout(() => {
        this.dialogVisible = true
      }, 500)
    }
  },
  mounted () {
    this.changeDialogVisible()
  }
}
</script>

<style lang="stylus" scoped>
  div >>> .el-dialog__header {
    padding: 0;
  }

  .sign-in-up-dialog {
    width: 420px;
    margin: 0 auto;

    .sign-in-up-dialog-pane {
      margin: 30px 28px;

      .sign-in-up-dialog-pane-button {
        width: 100%;
      }

      .sign-in-up-dialog-pane-input {
        float: left;
        width: 62%;
      }

      .sign-in-up-dialog-pane-select {
        float: right;
        width: 35%;
      }

      .sign-in-up-dialog-pane-img-captcha {
        float: right;
        height: 40px;
        margin-right: 20px;
      }
    }
  }
</style>
